<template>
    <div class="info-collect">
        <Crumb name="进口"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="根据提单号查询"
                        prefix-icon="el-icon-search"
                > </el-input>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="importList.slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="dispatchDateStr"
                            label="出口日期"

                    >
                    </el-table-column>
                    <el-table-column
                            prop="arrivePort"
                            label="港口"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ship"
                            label="船名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="boxTotal"
                            label="总件数"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="ladingNumber"
                            label="提单号"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="arriveDateStr"
                            label="到港日期"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                    >
                    </el-table-column>

                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import {getImportList} from "../../api/contract";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'

    export default {
        name: "import",
        mixins:[mixins],
        data() {
            return {
                list: [],
                key: '',
                dialogVisible:false
            }
        },
        computed:{
            importList(){
                return this.list.filter(item=>item.ladingNumber.includes(this.key))
            }
        },
        created(){
            this.getImportList()
        },
        methods: {
            async getImportList() {
                const {status,data} = await getImportList();
                if (status === ERROR_OK) {
                    this.list = data
                    this.total = data.length
                }
            }


        },
        components: {
            Crumb, Search
        },
        watch:{
            importList(list){
                this.total = list.length
            }
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>